From 4e8aea012e081c84351e3abb2459926e519a88d8 Mon Sep 17 00:00:00 2001 From: Matthias Clasen Date: Fri, 30 Oct 2015 21:44:19 -0400 Subject: [PATCH] Adwaita: Adapt to color swatch changes This needs more work and simplification. --- gtk/theme/Adwaita/_common.scss | 40 +++++++-------- gtk/theme/Adwaita/gtk-contained-dark.css | 62 ++++++++++++------------ gtk/theme/Adwaita/gtk-contained.css | 62 ++++++++++++------------ 3 files changed, 82 insertions(+), 82 deletions(-) diff --git a/gtk/theme/Adwaita/_common.scss b/gtk/theme/Adwaita/_common.scss index 220991c00d..b6290de7a9 100644 --- a/gtk/theme/Adwaita/_common.scss +++ b/gtk/theme/Adwaita/_common.scss @@ -3047,9 +3047,9 @@ infobar { * Color Chooser * *****************/ -GtkColorSwatch { - // This widget is made of two boxes one on top of the other, the lower box is GtkColorSwatch {} the other one - // is GtkColorSwatch > .overlay {}, GtkColorSwatch has the programmatically set background, so most of the style +colorswatch { + // This widget is made of two boxes one on top of the other, the lower box is colorswatch {} the other one + // is colorswatch overlay {}, GtkColorSwatch has the programmatically set background, so most of the style // is applied to the overlay box. $_colorswatch_shadow: inset 0 1px transparentize(black, 0.9), _widget_edge(); @@ -3061,7 +3061,7 @@ GtkColorSwatch { // take care of colorswatches on selected elements :selected & { box-shadow: none; - &.overlay, &.overlay:hover { + & overlay, & overlay:hover { border-color: $selected_fg_color; } } @@ -3083,34 +3083,34 @@ GtkColorSwatch { border-bottom-left-radius: $_colorswatch-radius + 1px; border-bottom-right-radius: $_colorswatch-radius + 1px; } - &.left, &:first-child:not(.overlay):not(.top) { + &.left, &:first-child:not(overlay):not(.top) { border-top-left-radius: $_colorswatch-radius + 1px; border-bottom-left-radius: $_colorswatch-radius + 1px; } - &.right, &:last-child:not(.overlay):not(.bottom) { + &.right, &:last-child:not(overlay):not(.bottom) { border-top-right-radius: $_colorswatch-radius + 1px; border-bottom-right-radius: $_colorswatch-radius + 1px; } - &:only-child:not(.overlay) { border-radius: $_colorswatch-radius + 1px; } + &:only-child:not(overlay) { border-radius: $_colorswatch-radius + 1px; } // overlay corner rounding - &.top > .overlay { + &.top > overlay { border-top-left-radius: $_colorswatch-radius; border-top-right-radius: $_colorswatch-radius; } - &.bottom > .overlay { + &.bottom > overlay { border-bottom-left-radius: $_colorswatch-radius; border-bottom-right-radius: $_colorswatch-radius; } - &:first-child:not(.top) > .overlay { + &:first-child:not(.top) > overlay { border-top-left-radius: $_colorswatch-radius; border-bottom-left-radius: $_colorswatch-radius; } - &:last-child:not(.bottom) > .overlay { + &:last-child:not(.bottom) > overlay { border-top-right-radius: $_colorswatch-radius; border-bottom-right-radius: $_colorswatch-radius; } - &:only-child > .overlay { border-radius: $_colorswatch-radius; } + &:only-child > overlay { border-radius: $_colorswatch-radius; } // hover effect &:hover, @@ -3119,15 +3119,15 @@ GtkColorSwatch { transparentize(white, 1) 50%); box-shadow: inset 0 1px transparentize(white, 0.6), inset 0 -1px if($variant == 'light', transparentize(black, 0.9), transparentize(black, 0.6)); - &.color-dark { // swatches with colors with luminosity lower than 50% get the color-dark class + &.dark overlay { // swatches with colors with luminosity lower than 50% get the dark class background-image: linear-gradient(135deg, transparentize(white, 0.5), transparentize(white, 1) 50%); } } &:backdrop, &:backdrop:selected - &.color-dark:backdrop, - &.color-dark:backdrop:selected { + &.dark:backdrop, + &.dark:backdrop:selected { background-image: none; box-shadow: none; } @@ -3143,20 +3143,20 @@ GtkColorSwatch { } // indicator and keynav outline colors - &.color-dark { + &.dark overlay { color: white; outline-color: transparentize(white, 0.5); &:backdrop { color: transparentize(white, 0.7); } } - &.color-light { + &.light overlay { color: black; outline-color: transparentize(black, 0.5); &:backdrop { color: transparentize(black, 0.7); } } // border color - &.overlay, - &.overlay:selected { + & overlay, + & overlay:selected { border: 1px solid if($variant == 'light', transparentize(black, 0.7), $borders_color); &:hover { border-color: if($variant == 'light', transparentize(black, 0.5), black); } } @@ -3168,7 +3168,7 @@ GtkColorSwatch { @include button(normal); &:hover { @include button(hover); } &:backdrop { @include button(backdrop); } - .overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat + overlay { @include button(undecorated); } // reset the overlay to not cover the button style underneat } } diff --git a/gtk/theme/Adwaita/gtk-contained-dark.css b/gtk/theme/Adwaita/gtk-contained-dark.css index 339dad8be2..f78854c363 100644 --- a/gtk/theme/Adwaita/gtk-contained-dark.css +++ b/gtk/theme/Adwaita/gtk-contained-dark.css @@ -4244,73 +4244,73 @@ infobar { /***************** * Color Chooser * *****************/ -GtkColorSwatch { +colorswatch { box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); } - :selected GtkColorSwatch { + :selected colorswatch { box-shadow: none; } - :selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover { + :selected colorswatch overlay, :selected colorswatch overlay:hover { border-color: #ffffff; } - GtkColorSwatch:selected { + colorswatch:selected { box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); } - GtkColorSwatch.top { + colorswatch.top { border-top-left-radius: 6px; border-top-right-radius: 6px; } - GtkColorSwatch.bottom { + colorswatch.bottom { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } - GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) { + colorswatch.left, colorswatch:first-child:not(overlay):not(.top) { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } - GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) { + colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - GtkColorSwatch:only-child:not(.overlay) { + colorswatch:only-child:not(overlay) { border-radius: 6px; } - GtkColorSwatch.top > .overlay { + colorswatch.top > overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } - GtkColorSwatch.bottom > .overlay { + colorswatch.bottom > overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } - GtkColorSwatch:first-child:not(.top) > .overlay { + colorswatch:first-child:not(.top) > overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } - GtkColorSwatch:last-child:not(.bottom) > .overlay { + colorswatch:last-child:not(.bottom) > overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } - GtkColorSwatch:only-child > .overlay { + colorswatch:only-child > overlay { border-radius: 5px; } - GtkColorSwatch:hover, GtkColorSwatch:hover:selected { + colorswatch:hover, colorswatch:hover:selected { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.4); } - GtkColorSwatch:hover.color-dark, GtkColorSwatch:hover:selected.color-dark { + colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); } - GtkColorSwatch:backdrop, GtkColorSwatch:backdrop:selected - GtkColorSwatch.color-dark:backdrop, GtkColorSwatch.color-dark:backdrop:selected { + colorswatch:backdrop, colorswatch:backdrop:selected + colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected { background-image: none; box-shadow: none; } - GtkColorEditor GtkColorSwatch { + GtkColorEditor colorswatch { border-radius: 3px; } - GtkColorEditor GtkColorSwatch:hover { + GtkColorEditor colorswatch:hover { background-image: none; box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px rgba(238, 238, 236, 0.1); } - GtkColorEditor GtkColorSwatch:backdrop { + GtkColorEditor colorswatch:backdrop { box-shadow: none; } - GtkColorSwatch.color-dark { + colorswatch.dark overlay { color: white; outline-color: rgba(255, 255, 255, 0.5); } - GtkColorSwatch.color-dark:backdrop { + colorswatch.dark overlay:backdrop { color: rgba(255, 255, 255, 0.3); } - GtkColorSwatch.color-light { + colorswatch.light overlay { color: black; outline-color: rgba(0, 0, 0, 0.5); } - GtkColorSwatch.color-light:backdrop { + colorswatch.light overlay:backdrop { color: rgba(0, 0, 0, 0.3); } - GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected { + colorswatch overlay, colorswatch overlay:selected { border: 1px solid #1c1f1f; } - GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover { + colorswatch overlay:hover, colorswatch overlay:selected:hover { border-color: black; } - GtkColorSwatch#add-color-button { + colorswatch#add-color-button { border-style: solid; border-width: 1px; color: #eeeeec; @@ -4320,7 +4320,7 @@ GtkColorSwatch { text-shadow: 0 -1px rgba(0, 0, 0, 0.81176); icon-shadow: 0 -1px rgba(0, 0, 0, 0.81176); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); } - GtkColorSwatch#add-color-button:hover { + colorswatch#add-color-button:hover { color: #eeeeec; outline-color: rgba(238, 238, 236, 0.3); border-color: #1c1f1f; @@ -4328,14 +4328,14 @@ GtkColorSwatch { text-shadow: 0 -1px rgba(0, 0, 0, 0.77976); icon-shadow: 0 -1px rgba(0, 0, 0, 0.77976); box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); } - GtkColorSwatch#add-color-button:backdrop { + colorswatch#add-color-button:backdrop { color: #949796; border-color: #1f2222; background-image: linear-gradient(to bottom, #393f3f); text-shadow: none; icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(238, 238, 236, 0); } - GtkColorSwatch#add-color-button .overlay { + colorswatch#add-color-button overlay { border-color: transparent; background-color: transparent; background-image: none; diff --git a/gtk/theme/Adwaita/gtk-contained.css b/gtk/theme/Adwaita/gtk-contained.css index 014e6f80fd..abfdfbf168 100644 --- a/gtk/theme/Adwaita/gtk-contained.css +++ b/gtk/theme/Adwaita/gtk-contained.css @@ -4416,73 +4416,73 @@ infobar { /***************** * Color Chooser * *****************/ -GtkColorSwatch { +colorswatch { box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; } - :selected GtkColorSwatch { + :selected colorswatch { box-shadow: none; } - :selected GtkColorSwatch.overlay, :selected GtkColorSwatch.overlay:hover { + :selected colorswatch overlay, :selected colorswatch overlay:hover { border-color: #ffffff; } - GtkColorSwatch:selected { + colorswatch:selected { box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; } - GtkColorSwatch.top { + colorswatch.top { border-top-left-radius: 6px; border-top-right-radius: 6px; } - GtkColorSwatch.bottom { + colorswatch.bottom { border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; } - GtkColorSwatch.left, GtkColorSwatch:first-child:not(.overlay):not(.top) { + colorswatch.left, colorswatch:first-child:not(overlay):not(.top) { border-top-left-radius: 6px; border-bottom-left-radius: 6px; } - GtkColorSwatch.right, GtkColorSwatch:last-child:not(.overlay):not(.bottom) { + colorswatch.right, colorswatch:last-child:not(overlay):not(.bottom) { border-top-right-radius: 6px; border-bottom-right-radius: 6px; } - GtkColorSwatch:only-child:not(.overlay) { + colorswatch:only-child:not(overlay) { border-radius: 6px; } - GtkColorSwatch.top > .overlay { + colorswatch.top > overlay { border-top-left-radius: 5px; border-top-right-radius: 5px; } - GtkColorSwatch.bottom > .overlay { + colorswatch.bottom > overlay { border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; } - GtkColorSwatch:first-child:not(.top) > .overlay { + colorswatch:first-child:not(.top) > overlay { border-top-left-radius: 5px; border-bottom-left-radius: 5px; } - GtkColorSwatch:last-child:not(.bottom) > .overlay { + colorswatch:last-child:not(.bottom) > overlay { border-top-right-radius: 5px; border-bottom-right-radius: 5px; } - GtkColorSwatch:only-child > .overlay { + colorswatch:only-child > overlay { border-radius: 5px; } - GtkColorSwatch:hover, GtkColorSwatch:hover:selected { + colorswatch:hover, colorswatch:hover:selected { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 50%); box-shadow: inset 0 1px rgba(255, 255, 255, 0.4), inset 0 -1px rgba(0, 0, 0, 0.1); } - GtkColorSwatch:hover.color-dark, GtkColorSwatch:hover:selected.color-dark { + colorswatch:hover.dark overlay, colorswatch:hover:selected.dark overlay { background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%); } - GtkColorSwatch:backdrop, GtkColorSwatch:backdrop:selected - GtkColorSwatch.color-dark:backdrop, GtkColorSwatch.color-dark:backdrop:selected { + colorswatch:backdrop, colorswatch:backdrop:selected + colorswatch.dark:backdrop, colorswatch.dark:backdrop:selected { background-image: none; box-shadow: none; } - GtkColorEditor GtkColorSwatch { + GtkColorEditor colorswatch { border-radius: 3px; } - GtkColorEditor GtkColorSwatch:hover { + GtkColorEditor colorswatch:hover { background-image: none; box-shadow: inset 0 1px rgba(0, 0, 0, 0.1), 0 1px white; } - GtkColorEditor GtkColorSwatch:backdrop { + GtkColorEditor colorswatch:backdrop { box-shadow: none; } - GtkColorSwatch.color-dark { + colorswatch.dark overlay { color: white; outline-color: rgba(255, 255, 255, 0.5); } - GtkColorSwatch.color-dark:backdrop { + colorswatch.dark overlay:backdrop { color: rgba(255, 255, 255, 0.3); } - GtkColorSwatch.color-light { + colorswatch.light overlay { color: black; outline-color: rgba(0, 0, 0, 0.5); } - GtkColorSwatch.color-light:backdrop { + colorswatch.light overlay:backdrop { color: rgba(0, 0, 0, 0.3); } - GtkColorSwatch.overlay, GtkColorSwatch.overlay:selected { + colorswatch overlay, colorswatch overlay:selected { border: 1px solid rgba(0, 0, 0, 0.3); } - GtkColorSwatch.overlay:hover, GtkColorSwatch.overlay:selected:hover { + colorswatch overlay:hover, colorswatch overlay:selected:hover { border-color: rgba(0, 0, 0, 0.5); } - GtkColorSwatch#add-color-button { + colorswatch#add-color-button { border-style: solid; border-width: 1px; color: #2e3436; @@ -4492,7 +4492,7 @@ GtkColorSwatch { text-shadow: 0 1px rgba(255, 255, 255, 0.76923); icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); box-shadow: inset 0 1px white, 0 1px white; } - GtkColorSwatch#add-color-button:hover { + colorswatch#add-color-button:hover { color: #2e3436; outline-color: rgba(46, 52, 54, 0.3); border-color: #a1a1a1; @@ -4500,14 +4500,14 @@ GtkColorSwatch { text-shadow: 0 1px rgba(255, 255, 255, 0.76923); icon-shadow: 0 1px rgba(255, 255, 255, 0.76923); box-shadow: inset 0 1px white, 0 1px white; } - GtkColorSwatch#add-color-button:backdrop { + colorswatch#add-color-button:backdrop { color: #8e9192; border-color: darkgray; background-image: linear-gradient(to bottom, #ededed); text-shadow: none; icon-shadow: none; box-shadow: inset 0 1px rgba(255, 255, 255, 0), 0 1px rgba(255, 255, 255, 0); } - GtkColorSwatch#add-color-button .overlay { + colorswatch#add-color-button overlay { border-color: transparent; background-color: transparent; background-image: none; -- 2.30.2